extends layout

block content
  h5= title
    div
      span(id="datetime")
  a(class="btn btn-primary" href="#" role="button" id="btn_history") 昨天
  a(class="btn btn-primary" href="#" role="button" id="btn_refresh") 刷新
  div(
    id='container_1'
    style='min-width:400px;height:400px'
  ) 
  div(
    id='container_2'
    style='min-width:400px;height:400px'
  ) 

append scripts
  script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim.js')

  script(src='/javascripts/highcharts.js')
  script(src='/javascripts/exporting.js')
  script(src='/javascripts/highcharts-ZH_CN.js')

  script.   
    let chart_1 = null;
    let chart_2 = null;
    
    //charts 
    Highcharts.setOptions({
      global: {
        useUTC: true,
      } });

    function get_data(uri) {
      $.getJSON(uri, function(csv) {
      console.log(csv);
      chart_1 = Highcharts.chart('container_1', {
        chart: {
          type: 'spline',
          zoomType: 'x',
          marginRight: 10,
          events: {
            load: function () {
              // load evt
            }
          }
        },
        title: {
          text: '1线压力'
        },
        xAxis: {
          type: 'datetime',
          title: {
            text: null
          }
        },
        yAxis: {
          title: {
            text: null
          }
        },
        tooltip: {
          formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              Highcharts.numberFormat(this.y, 2);
          }
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: '1线数据',
            data: csv.data_1,
          }
        ]
      });

      chart_2 = Highcharts.chart('container_2', {
        chart: {
          type: 'spline',
          zoomType: 'x',
          marginRight: 10,
          events: {
            load: function () {
              // load evt
            }
          }
        },
        title: {
          text: '2线压力'
        },
        xAxis: {
          type: 'datetime',
          title: {
            text: null
          }
        },
        yAxis: {
          title: {
            text: null
          }
        },
        tooltip: {
          formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              Highcharts.numberFormat(this.y, 2);
          }
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: '2线数据',
            data: csv.data_2,
          }
        ]
      });
      // 显示事件
      $("#datetime").html(csv.datetime);
    });
    }

    get_data('/p/history/0');

    // 昨天
    $("#btn_history").click(function(){
      let dt = new Date();
      dt.setDate(dt.getDate() - 1);
      chart_1 = null;
      chart_2 = null;
      get_data('/p/history/' + dt.toString());
    });

    // 刷新
    $("#btn_refresh").click(function(){
      let dt = new Date();
      dt.setDate(dt.getDate() - 1);
      chart_1 = null;
      chart_2 = null;
      get_data('/p/history/0');
    });